<template>
  <div class="lsc-items">
    <van-search placeholder="请输入商品名称" v-on:focus="showSearch=true" />

    <van-popup v-model="showSearch" position="right" :overlay="false" style="width:100%;height:100%;overflow-y: auto; ">
      <div class="lsc-items-back" @click="showSearch=false">
        <van-icon name="arrow-left"/>
      </div>
      <van-search
        v-model="keyWord"
        placeholder="请输入商品名称"
        show-action
        @search="onSearch"
        style="padding:4px 0"
      >
        <div slot="action" @click="onSearch(keyWord)">搜索</div>
      </van-search>
      
      <div class="hot-search">
        <div class="hot-search-head" v-if="searchKey.length">最近搜索</div>
        <div id="searchland5" class="hot-search-tags">
          <span v-for="(item,index) in searchKey" :key="index">
            <a @click="goodsSearch(item)">
              <i class="hot-search-move">{{item}}</i>
            </a>
          </span>
        </div>
      </div>
      
      <div class="lsc-loading" v-if="!searchGoods.length">查无记录</div>
      <div>
        <van-card
          v-for="(item,index) in searchGoods"
          :key="index"
          :title="item.name"
          :desc="item.model" 
          :thumb="item.pic_path"
        >
          <div slot="footer">
            <van-button size="small" @click="gotoBuy(item.model, item.class_id)" >去购买</van-button>
          </div>
        </van-card>
      </div>
    </van-popup>

    <div id="categoryBody" class="category-viewport category-categoryNewUi">
      <div id="rootList" class="jd-category-tab">
        <div style="overflow: hidden;">
          <van-badge-group :active-key="activeKey">
            <van-badge 
              v-for="item in classList"
              :key="item.id"
              :title="item.name" 
              @click="onClickCategory(item.id)" />
          </van-badge-group>
        </div>
      </div>
      <div class="jd-category-content">
        <div id="branchScroll" style="overflow: hidden;background:#fff;" class="jd-category-content-wrapper">
          <div id="branchList" style="transform: translateY(0px);">
            <div class="jd-category-div cur">
              <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoadAllGoods"
              >
                <ul class="find-similar-ul cf" data-floor="Mhome_BRecommend" id="recommendList">
                  <li class="similar-li" v-for="(item,index) in allGoods" :key="index">
                    <router-link :to="'/details?modelNo=' + item.model + '&cid='+item.class_id">
                      <div class="similar-product">
                        <div class="similar-posre">
                          <img class="Jschangewidth opa1" :src="item.pic_path" style="width: 8.2rem; height: 8.2rem; opacity: 1;">
                        </div>
                        <p class="similar-product-info">
                          <span class="similar-product-price">
                            名称：{{item.name}}
                          </span>
                          <span class="similar-product-price">
                            型号：{{item.model}}
                          </span>
                        </p>
                      </div>
                    </router-link>
                    <div class="recommend-ad-mark"></div>
                  </li>
                </ul>
              </van-list>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'items',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      classList: 'getCategory',
      searchKey: 'getSearchKey'
    })
  },
  data () {
    return {
      loading: false,
      finished: false,
      keyWord: '',
      allGoods: [],
      searchGoods: [],
      allGoodsKey: {
        pageindex: 0,
        pagesize: 10,
        key: '',
        sort_type: 0,
        class_id: 0
      },
      searchGoodsKey: {
        pageindex: 1,
        pagesize: 40,
        key: '',
        sort_type: 0,
        class_id: 0
      },
      activeKey: 0,
      showSearch: false,
      searchValue: '',
    }
  },
  created() {
    // 获取搜索的历史记录
    this.$store.dispatch('fetchSearchKey')
    setTimeout(()=>{
      this.$nextTick(()=>{
        this.historyKey = this.searchKey
        let cid = this.$route.query.id
        this.activeKey = cid - 1
        this.allGoodsKey.class_id = cid*1
        // this.allGoodsKey.pageindex = 0
        // this.onLoadAllGoods()
      })
    },100)
  },
  methods: {
    onClickCategory(key) {
      this.allGoods = []
      this.activeKey = key - 1;
      this.allGoodsKey.pageindex = 0
      // this.allGoodsKey.total = 0
      this.allGoodsKey.class_id = key
      this.onLoadAllGoods()
    },
    onSearch(key) {
      if(!key) return
      let findSame = this.historyKey.findIndex((val)=>{ return val == key })
      if(findSame < 0 && this.historyKey.length ==12) this.historyKey.splice(0, 1)
      if(findSame < 0 && this.historyKey.length <12) this.historyKey.push(key)
      localStorage.setItem('searchKey', this.historyKey)

      this.$store.dispatch('fetchSearchKey')
      this.goodsSearch(key)
    },
    goodsSearch(key) {
      this.searchGoods = []
      this.searchGoodsKey.key = key
      this.getGoodsItems(1)
    },
    getGoodsItems(isSearch) {

      this.$store.dispatch('fetchLoading', true)
      // let params = isSearch ? this.searchGoodsKey : this.allGoodsKey

      this.axios.post(api.good.search, this.searchGoodsKey)
        .then(res=>{
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.searchGoods = res.data.data
            this.searchGoodsKey.total = res.data.pageinfo.total
          }
        })
    },
    onLoadAllGoods() {
      this.loading = true;
      this.allGoodsKey.pageindex += 1
      setTimeout(()=>{

        this.axios.post(api.good.search, this.allGoodsKey)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.allGoods = res.data.data ? this.allGoods.concat(res.data.data) : []
            this.loading = false;
            if (this.allGoods.length >= res.data.pageinfo.total) {
              this.finished = true;
            }else {
              this.finished = false;
            }
          }
        })
      }, 500)
    },
    gotoBuy(model,cid) {
      this.$router.push(`details?modelNo=${model}&cid=${cid}`)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-items .lsc-items-back {
    width: 3rem;
    height: 42px;
    line-height: 47px;
    float: left;
    text-align: center;
    background: #f2f2f2;
}
.lsc-items .van-search__action>div {
  padding: 0 10px;
}
.lsc-items .van-card__row {
  margin-top: 8px;
}


.lsc-items .hot-search,.recent-search {
    padding-left: 13px;
    margin-top: 15px
}

.lsc-items .hot-search-tags,.lsc-items .recent-search-tags {
    padding-right: 2px;
    overflow: hidden;
    font-size: .75rem;
    text-align: center
}

.lsc-items .hot-search-tags .limit,.recent-search-tags .limit {
    overflow: hidden;
    height: 33px
}

.lsc-items .hot-search-tags a,.lsc-items .recent-search-tags a {
    height: 1.4375rem;
    line-height: 1.5rem;
    border-radius: 3px;
    display: block;
    color: #686868;
    white-space: nowrap;
    min-width: 3.3rem;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background-color: #f0f2f5;
    padding-left: 13px;
    padding-right: 13px;
    overflow: hidden
}

.lsc-items .hot-search-tags span,.lsc-items .recent-search-tags span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding-right: 10px;
    padding-bottom: 10px;
    float: left
}

.lsc-items .similar-li {
  /* float: left; */
  display: inline-block;
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 4px;
  position: relative;
}

.lsc-items .similar-li:nth-child(odd) {
    padding-right: 2px
}

.lsc-items .similar-li:nth-child(2n) {
    padding-left: 2px
}
.lsc-items .similar-li::after {
  display: block;
  content: '';
  clear: both;
}

.lsc-items .similar-product {
    background-color: #fff;
    padding-bottom: 6px;
    font-size: 0
}

.lsc-items .similar-product img {
    width: 100%;
    display: block
}

.lsc-items .similar-product-info {
  height: 40px;
  margin: 5px;
  font-size: 13px;
  overflow: hidden;
  width: 90%;
}

.lsc-items .similar-product-price {
  color: #333;
  display: block;
  padding: 0 5px 0 4px;
  position: relative;
  top: 1px;
  left: 0;
  height: 15px;
  /* padding: 2px 0; */
  /* width: 80%; */
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

.lsc-items .category-viewport {
    height: auto;
    min-height: 100%
}

.lsc-items .jd-category-tab {
    float: left;
    min-width: 85px;
    width: 85px;
    height: auto;
    overflow-y: auto;
    min-height: 100%
}

.lsc-items .jd-category-content {
    height: auto;
    min-height: 100%;
    width: 100%;
    font-size: 12px;
    color: #252525;
    background-color: #f3f5f7
}

.lsc-items .jd-category-content #branchList {
    overflow: hidden;
    padding-bottom: 10px
}

.lsc-items .jd-category-content .jd-category-content-wrapper {
    margin-left: 76px
}

.lsc-items .jd-category-content .jd-category-div {
    display: none;
    margin: 19px 7px 0 7px
}

.lsc-items .jd-category-content .jd-category-div.cur {
    display: block
}

</style>
